<!-- 车型管理 -->
<template>
<<<<<<< HEAD
  <div class="dashboard-container operational-range customer-list-box">
    <div class="app-container">
      <!-- 上部分 -->
      <el-card
        class="search-card-box"
        shadow="never"
      >
        <el-form
          ref="rangeSearchFormData"
          :model="rangeSearchFormData"
          label-width="95px"
        >
          <el-row :gutter="60">
            <el-col :span="8">
              <el-form-item
                label="车型编号:"
                style="margin-bottom: 0px"
              >
                <el-input
                  v-model="rangeSearchFormData.id"
                  clearable
                  placeholder="请输入车型编号"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="应载重量:"
                style="margin-bottom: 0px"
              >
                <el-select
                  v-model="rangeSearchFormData.allowableLoad"
                  placeholder="请输入应载重量"
                >
                  <el-option
                    v-for="item in bleLoad.allowableLoad"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                  ></el-option>

                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="应载体积:"
                style="margin-bottom: 0px"
                label-width="110px"
              >
                <el-select
                  v-model="rangeSearchFormData.allowableVolume"
                  placeholder="请输入应载体积"
                >
                  <el-option
                    v-for="item in bleLoad.allowableVolume"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                prop="username"
                label="车辆类型:"
                style="margin-top: 20px; margin-bottom: 0px"
              >
                <el-input
                  v-model="rangeSearchFormData.name"
                  clearable
                  placeholder="请输入车辆类型"
                />

              </el-form-item>
            </el-col>
            <el-col
              :span="8"
              style="margin-top: 20px"
            >
              <el-button
                type="warning"
                @click="searchCar()"
              >搜索</el-button>
              <el-button
                plain
                class="reset-btn"
                @click="resetForm()"
              >重置</el-button>
            </el-col>
          </el-row>
        </el-form>
      </el-card>

      <div
        v-loading="listLoading"
        :class="{ 'loading-box': listLoading }"
        element-loading-text="加载中"
        style="margin-top: 20px"
      >
        <!-- 下部分 -->
        <el-card
          class="table-card-box"
          shadow="never"
        >
          <el-button
            class="addcar"
            type="warning"
            @click="openSearchCar()"
          >新增车型</el-button>
          <!-- 表格 -->
          <el-table
            ref="multipleTable"
            :data="dataList"
            style="width: 100%"
            stripe
            :header-cell-style="{ background: 'rgba(250,252,255,1)' }"
          >

            <!-- 表格 -->
            <el-table-column
              :index="indexMethod"
              width="100"
              align="left"
              type="index"
              label="序号"
            >
            </el-table-column>
            <!-- 车型编号 -->
            <el-table-column
              width="180"
              prop="id"
              align="left"
              label="车型编号"
            >
            </el-table-column>
            <!-- 车辆类型 -->
            <el-table-column
              prop="name"
              align="left"
              label="车辆类型"
            >
            </el-table-column>
            <!-- 车型数量 -->
            <el-table-column
              prop="num"
              align="left"
              label="车型数量"
            >
              <!-- <template slot-scope="scope">
                <span>{{ scope.row.mobile }}</span>
              </template> -->
            </el-table-column>
            <!-- 应载重量（吨） -->
            <el-table-column
              prop="allowableLoad"

              align="left"
              label="应载重量（吨）"
            >
              <!-- <template slot-scope="scope">
                <span>{{
                  scope.row.agency === null ? '' : scope.row.agency.name
                }}</span>
              </template> -->
            </el-table-column>
            <!-- 应载体积（立方米） -->
            <el-table-column
              prop="allowableVolume"

              align="center"
              label="应载体积（立方米)"
              width="150"
            >
              <!-- <template slot-scope="scope">
                <span>{{
                  scope.row.agency === null ? '' : scope.row.agency.name
                }}</span>
              </template> -->
            </el-table-column>
            <!-- 长（米） -->
            <el-table-column
              prop="measureLong"
              align="left"
              label="长（米）"
            >
            </el-table-column>
            <!-- 宽（米） -->
            <el-table-column
              prop="measureWidth"
              align="left"
              label="宽（米）"
            >
            </el-table-column>
            <!-- 高（米） -->
            <el-table-column
              prop="measureHigh"
              align="left"
              label="高（米）"
            >
            </el-table-column>
            <!-- 操作按钮 -->
            <el-table-column
              align="center"
              label="操作"
              class-name="small-padding fixed-width"
              fixed="right"
            >
              <template slot-scope="{row}">
                <el-button
                  type="text"
                  size="small"
                  @click="handleClick(row)"
                >编辑</el-button>

                <el-button
                  class="el-buttondel"
                  type="text"
                  size="small"
                  @click="delcar(row)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- end -->
          <!-- 分页 -->
          <div class="pagination">
            <div
              v-show="dataList && dataList.length > 0"
              class="pages"
            >
              <el-pagination
                :current-page="carData.page"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="10"
                layout="total, sizes, prev, pager, next, jumper"
                :total="+alldata.counts"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              >
              </el-pagination>
            </div>
          </div>
        </el-card>
      </div>
    </div>
    <!-- 弹窗 -->
    <el-dialog
      :title="title"
      :visible="isDialog"
      :close-on-click-modal="false"
      @close="closeFilter"
    >
      <el-form
        ref="dataForm"
        v-loading="editLoading"
        :rules="rules"
        :model="form"
        label-position="right"
        label-width="110px"
        style="width: 100%"
      >
        <el-form-item
          label="车辆类型"
          prop="name"
        >
          <el-input
            v-model="form.name"
            placeholder="请输入车辆类型"
          />
        </el-form-item>
        <el-form-item
          label="应载重量"
          prop="allowableLoad"
        >
          <el-input
            v-model="form.allowableLoad"
            placeholder="请输入车型载重"
          ><i
            slot="suffix"
            style="font-style:normal;margin-right: 10px;"
          >吨</i>
          </el-input></el-form-item>
        <el-form-item
          label="应载体积"
          prop="allowableVolume"
        >
          <el-input
            v-model="form.allowableVolume"
            placeholder="请输入车型体积"
          ><i
            slot="suffix"
            style="font-style:normal;margin-right: 10px;"
          >立方</i></el-input>
        </el-form-item>
        <el-form-item
          label="长"
          prop="measureLong"
        >
          <el-input
            v-model="form.measureLong"
            placeholder="0.0"
          ><i
            slot="suffix"
            style="font-style:normal;margin-right: 10px;"
          >米</i></el-input>
        </el-form-item>
        <el-form-item
          label="宽"
          prop="measureWidth"
        >
          <el-input
            v-model="form.measureWidth"
            placeholder="0.0"
          ><i
            slot="suffix"
            style="font-style:normal;margin-right: 10px;"
          >米</i></el-input>
        </el-form-item>
        <el-form-item
          label="高"
          prop="measureHigh"
        >
          <el-input
            v-model="form.measureHigh"
            placeholder="0.0"
          ><i
            slot="suffix"
            style="font-style:normal;margin-right: 10px;"
          >米</i></el-input>
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
        style="text-align: center"
      >
        <el-button
          type="danger"
          class="save-btn"
          @click="createData"
        >确认</el-button>
        <el-button
          class="save-btn"
          @click="closeFilter"
        >取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import bleLoad from '@/constant/car'
import { list, del, add, detail, update } from '@/api/transit'
export default {
  name: 'Courses',
  components: {

  },
  data() {
    return {
      bleLoad,
      // 上传的页面数量
      carData: {
        page: 1,
        pageSize: 10
      },
      // 列表数据
      dataList: [],
      // 所有数据
      alldata: '',
      // 总页数
      pages: 0,
      isDialog: false,
      listLoading: false,
      editLoading: false,
      form: {
        // 准载重量
        allowableLoad: '',
        // 准载体积
        allowableVolume: '',
        // 货物类型列表
        goodsTypes: [],
        // 高
        measureHigh: '',
        // 长
        measureLong: '',
        // 宽
        measureWidth: '',
        // 车辆类型名称
        name: ''
      },
      rangeSearchFormData: {},
      title: '',
      alertText: '',
      formLabelWidth: '80px',
      titleInfo: {
        pageTitle: '',
        text: ''
      },
      formData: {
        userId: '',
        options: '',
        countrys: ''
      },
      rules: {
        name: [
          { required: true, message: '车辆类型不能为空', trigger: 'blur' }
        ],
        allowableLoad: [
          { required: true, message: '应载重量不能为空', trigger: 'blur' }
        ],
        allowableVolume: [
          { required: true, message: '应载体积不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    // status() {
    //   return status
    // }
  },

  created() {
    console.log(this.bleLoad)
    this.carList()
  },
  // 组件更新
  updated: function () {},
  methods: {
    // 点击搜索
    async searchCar() {
      const { data } = await list({ ...this.carData, ...this.rangeSearchFormData })
      this.dataList = data.items
      this.pages = data.pages
    },
    // 点击编辑触发
    async  handleClick(row) {
      this.editLoading = true

      // 打开弹窗
      this.openSearchCar()
      this.title = '编辑车型'
      const { data } = await detail(row.id)
      this.form = data
      this.editLoading = false
    },
    // 确认按钮
    createData() {
      this.$refs.dataForm.validate(async flag => {
        if (!flag) return
        if (this.title === '编辑车型') {
          await update(this.form.id, this.form)
          this.$message.success('编辑成功')
        } else {
          await add(this.form)
        }
        this.$message.success('添加成功')
        await this.carList()
        this.measureHigh = ''
        this.measureLong = ''
        this.measureWidth = ''
        this.closeFilter()
      })
    },
    // 点击新增
    addcar() {
      // 打开弹窗
      this.openSearchCar()
      // 点击搜索
      this.title = '新增车型'
    },
    // 打开弹窗
    openSearchCar() {
      // title
      this.isDialog = true
    },
    // 关闭弹窗
    closeFilter() {
      this.$refs.dataForm.resetFields()
      this.isDialog = false
    },
    // 序号
    indexMethod(index) {
      return (this.carData.page - 1) * this.carData.pageSize + index + 1
    },
    // 删除
    delcar(row) {
      this.$confirm('确定要删除吗?', '提示').then(async() => {
        const res = await del(row.id)
        console.log(res)
        this.$message.success(res.msg)
        if (this.dataList.length === 1 && this.pages > 1) {
          this.carData.page--
        }
        this.carList()
      }).catch(() => {})
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      this.carData.page = val
      this.carList()
    },
    // 获取车辆列表
    async carList() {
      this.listLoading = true
      const { data } = await list(this.carData)
      // console.log('1', data)
      this.alldata = data
      this.dataList = data.items
      this.pages = data.pages
      this.listLoading = false
    },
    // 重置
    resetForm() {
      this.rangeSearchFormData = ''
=======
  <div class="dashboard-container car-models customer-list-box">
    <div class="app-container">
      <el-card class="search-card-box">
        <el-form
          :inline="true"
          :model="formInline"
          class="demo-form-inline"
        >
          <el-form-item
            label="车型编号:"
          >
            <el-input
              v-model="form.id"
              class="el-input"
              placeholder="请输入车型编号"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="应载重量:"
            class="el-label"
          >
            <el-select
              v-model="form.allowableLoad"
              class="el-input"
              placeholder="请选择应载重量"
            >
              <el-option
                label="区域一"
                value="shanghai"
              ></el-option>
              <el-option
                label="区域二"
                value="beijing"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="应载体积:">
            <el-select
              v-model="form.allowableVolume"
              class="el-input"
              placeholder="请选择应载体积"
            >
              <el-option
                label="区域一"
                value="shanghai"
              ></el-option>
              <el-option
                label="区域二"
                value="beijing"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="车辆类型:">
            <el-input
              v-model="form.name"
              class="el-input"
              placeholder="请输入车辆类型"
            ></el-input>
          </el-form-item>
          <el-button
            class="button"
            type="primary"
            @click="submitForm('ruleForm')"
          >搜索</el-button>
          <el-button
            class="bottone"
            @click="resetForm('ruleForm')"
          >重置</el-button>
          <el-form-item>

            <!-- <el-button
              type="primary"
              @click="onSubmit"
            >查询</el-button> -->
          </el-form-item>
        </el-form>
      </el-card>
      <el-card class="box-card">
        <el-row>
          <el-button
            class="el-button"
            type="danger"
            @click="openDialog"
          >新增车型</el-button>
        </el-row>
        <el-table
          class="el-table"
          :data="arr"
          stripe
        >
          <!-- 序号 -->
          <el-table-column
            type="index"
            label="序号"
            width="100"
          >
          </el-table-column>
          <!-- 车型编号 -->
          <el-table-column
            prop="id"
            label="车型编号"
            width="200"
          >
          </el-table-column>
          <!-- 车辆类型 -->
          <el-table-column
            prop="name"
            label="车辆类型"
          >
          </el-table-column>
          <!-- 车型数量 -->
          <el-table-column
            prop="num"
            label="车型数量"
          ></el-table-column>
          <!-- 应载重量 -->
          <el-table-column
            prop="allowableLoad"
            label="应载重量(吨)"
          >
          </el-table-column>
          <!-- 应载体积 -->
          <el-table-column
            prop="allowableVolume"
            label="应载体积(立方米)"
            class="el-tab"
          >
          </el-table-column>
          <!-- 长 -->
          <el-table-column
            prop="measureLong"
            label="长(米)"
            width="120"
          >
          </el-table-column>
          <!-- 宽 -->
          <el-table-column
            prop="measureWidth"
            label="宽(米)"
            width="120"
          >
          </el-table-column>
          <!-- 高 -->
          <el-table-column
            prop="measureHigh"
            label="高(米)"
            width="120"
          >
          </el-table-column>
          <!-- 操作 -->
          <el-table-column
            label="操作"
            width="120"
          >
            <template #default="{row}">
              <el-button
                type="text"
                size="small"
              >查看</el-button>

              <el-button
                type="text"
                size="small"
                @click="delet(row.id)"
              >删除</el-button>

            </template>

          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            :current-page="page"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          >
          </el-pagination>
        </div>
      </el-card>
      <!-- 对话框 -->
      <el-dialog
        title="添加车型"
        :visible="showDialog"
      >
        <!--  -->
        <el-form
          label-width="80px"
          :model="form"
          :rules="rules"
        >
          <el-form-item
            prop="truckTypes"
            label="车辆类型"
          >
            <el-input
              v-model="form.truckTypes"
              class="el-ipt"
              placeholder="请输入车辆类型"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="应载重量"
            prop="allowableLoad"
          >
            <el-input
              v-model="form.allowableLoad"
              class="el-ipt"
              placeholder="请输入车辆载重"
            >
              <i
                slot="suffix"
                class="size"
              >吨</i></el-input>
          </el-form-item>
          <el-form-item
            label="应载体积"
            prop="allowableVolume"
          >
            <el-input
              v-model="form.allowableVolume"
              class="el-ipt"
              placeholder="请输入车型体积"
            >
              <i
                slot="suffix"
                class="size"
              >立方</i>
            </el-input>
          </el-form-item>
          <el-form-item
            label="长"
          >
            <el-input
              v-model="form.measureLong"
              class="el-ipt"
              placeholder="请输入长"
            >
              <i
                slot="suffix"
                class="size"
              >米</i></el-input>
          </el-form-item>
          <el-form-item
            label="宽"
          >
            <el-input
              v-model="form.measureWidth"
              class="el-ipt"
              placeholder="请输入宽"
            >
              <i
                slot="suffix"
                class="size"
              >米</i></el-input>
          </el-form-item>
          <el-form-item
            label="高"
          >
            <el-input
              v-model="form.measureHigh"
              class="el-ipt"
              placeholder="请输入高"
            >
              <i
                slot="suffix"
                class="size"
              >米</i></el-input>
          </el-form-item>
          <el-button
            class="buttonq"
            type="danger"
          >确认</el-button>
          <el-button
            class="buttonw"
            @click="closeAssignDialog"
          >取消</el-button>
        </el-form>
      </el-dialog>
    </div>
  </div></template>
<script>
import { list, del } from '@/api/transit'
export default {
  data() {
    return {
      rules: {
        truckTypes: [
          { required: true, message: '车型名称不能为空', trigger: 'blur' }
        ],
        allowableLoad: [
          { required: true, message: '应载重量不能为空', trigger: 'blur' }
        ],
        allowableVolume: [
          { required: true, message: '应载体积不能为空', trigger: 'blur' }]
      },
      page: 1,
      pageSize: 10,
      showDialog: false,
      total: 0,
      arr: [],
      form: {
        measureLong: '', // 长
        measureWidth: '', // 宽
        measureHigh: '', // 高
        allowableLoad: '', // 准载重量
        allowableVolume: '', // 准载体积
        truckTypes: '', // 车辆类型
        id: '',
        name: '',
        num: ''
      },
      formInline: {
        user: '',
        region: ''
      }
    }
  },
  created() {
    this.pagelistap()
  },
  methods: {
    edit(id) {
      console.log(id)
    },
    // 6. 关闭弹窗
    closeAssignDialog() {
      this.showDialog = false
    },
    // 5. 删除
    delet(id) {
      console.log(id)
      this.$confirm('确定要删除?', '温馨提示').then(async () => {
        await del(id)
        this.$message.success('恭喜!删除成功')
        this.pagelistap()
      }).catch(() => {
        console.log('取消')
      })
    },
    // 4. 新增打开弹窗
    openDialog() {
      this.showDialog = true
    },

    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`)
      this.pageSize = val
      this.page = 1
      // 重新渲染页面
      this.pagelistap()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.page = val
      this.pagelistap()
    },
    // 2. 如果num等于null,就赋值为0
    changenull() {
      this.tableData.forEach(item => {
        // console.log(item)
        if (item.num == null) {
          item.num = 0
        }
      })
    },
    // 3. 获取列表和分页列表
    async pagelistap() {
      const { data } = await list({ page: this.page, pageSize: this.pageSize })
      console.log(data)
      this.arr = data.items
      this.total = +data.counts
    },
    onSubmit() {
      // console.log('submit!')
>>>>>>> 523aefe4b9859a1414aa4965cd7586d87a902377
    }
  }
}
</script>
<<<<<<< HEAD

<style lang="scss" scoped>
.el-buttondel {
  color: red;
}
.save-btn{
  width: 100px;
}
  .addcar{
    margin:0 0 20px;
  }

  /deep/ .el-dialog__body {
    padding: 40px 80px 0 50px !important;
  }

=======
<style rel="stylesheet/scss" lang="scss" scoped>

.size{
  color: black;
  margin-right: 40px;
}
.el-ipt{
  width: 450px!important;
  height: 45px!important;
}
.buttonw{
   width: 90px;
  height: 50px;
}
.buttonq{
  font-size: 16px;
  margin-left: 180px;
  width: 90px;
  height: 50px;
}
span{
  color: #9b9fa8;
}
.del{
  color: #f56c6c;
  margin-left: 10px;
}
.edit{
  margin-right: 4px;
  margin-left: -40px;
  color: #419eff;
}
a{
  font-size: 14px;
}
.el-table{
  margin-top: 20px;
  height: 100%;
}
.el-button{
  font-size: 16px;
}
.box-card{
 margin-left: 0px!important;
  width: 1450px!important;
  margin-top: 10px!important;
  height: 120%!important
}
.bottone{
   width: 100px;
  height: 44px;
  color: #000;
  font-size: 16px;
  margin-left: 20px;
}
.button{
    margin-left: 40px;
  width: 100px;
  height: 44px;
  color: #fff;
   font-size: 16px;
   background-color: #e15536;
   border: 0;
}
.el-label{
  color: #818693;
}
.el-input{
  font-size: 16px;
  height: 100px;
  width: 300px;
  padding-right: 30px;
  height: 40px;
  line-height: 40px;
  padding-right: 30px
}
.el-input:hover{
  border-color: #818693;
}
.el-form-item__label{
  width: 80px;
}
.el-form-item{
  margin-left: 30px;
  padding-left: 30px;
    padding-right: 30px;
}
// .el-form{
//  padding-left: 30px;
//     padding-right: 30px;
// }
.text {
    font-size: 14px;
  }

  .item {
    padding: 18px 0;
  }
  .search-card-box{
    height: 150px;
  }
  .box-card {
    width: 1450px;
    height: 180px;
    margin-left: 18px;
    margin-top: 10px;
    border-radius: 5px;
  }
  .text {
    font-size: 14px;
  }

  .item {
    padding: 18px 0;
  }

  .box-card {
    width: 480px;
  }
>>>>>>> 523aefe4b9859a1414aa4965cd7586d87a902377
</style>
